<template>
  <div style="margin-bottom: 20px;">
    <!-- 首页轮播图 -->
    <Carousel></Carousel>
    <!-- 首页搜索医院的表单区域 -->
    <Search></Search>
    <!-- 底部展示医院的结构 -->
    <el-row :gutter="20">
      <el-col :span="20">
        <!-- 等级 -->
        <Level @getLevel="getLevel"></Level>
        <!-- 地区 -->
        <Region @getRegion="getRegion"></Region>
        <!-- 展示医院的结构 -->
        <div class="hospital" v-if="hospitalArr.length > 0">
          <Card
            class="item"
            v-for="(item, index) in hospitalArr"
            :key="index"
            :hospitalInfo="item"
          />
        </div>
        <el-empty v-else description="暂无数据" />
        <!-- 分页器 -->

        <el-pagination
          v-model:current-page="page"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 40]"
          :background="true"
          layout="prev, pager, next, jumper,->,sizes,total"
          :total="total"
          @current-change="currentChange"
          @size-change="sizeChange"
        />
      </el-col>
      <el-col :span="4">
        <Tip></Tip>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import Carousel from "./carousel/index.vue"
import Search from "./search/index.vue"
import Level from "./level/index.vue"
import Region from "./region/index.vue"
import Card from "./card/index.vue"
import Tip from "./tip/index.vue"

import { ref, onMounted } from 'vue'
import { getHospitalData } from '@/api/home/index'

import type { Content, HospitalResponseData } from '@/api/home/type'

let page = ref<number>(1);
let pageSize = ref<number>(10);
let total = ref<number>(0);

let hostype = ref<string>('');
let districtCode = ref<string>('');

let hospitalArr = ref<Content>([]);

const getHospitalInfo = async () => {
  const res: HospitalResponseData = await getHospitalData(page.value, pageSize.value, hostype.value, districtCode.value);
  if (res.code == 200) {
    hospitalArr.value = res.data.content;
    total.value = res.data.totalElements
  }
}

onMounted(() => {
  getHospitalInfo()
})

//分页器页码发生变化时候回调
const currentChange = () => {
  getHospitalInfo();
};
//分页器下拉菜单发生变化的时候会触发
const sizeChange = () => {
  //当前页码归第一页
  page.value = 1;
  //再次发请求获取医院的数据
  getHospitalInfo();
};

const getLevel = async (level: string) => {
  hostype.value = level;
  await getHospitalInfo()
}
const getRegion = async (region: string) => {
  districtCode.value = region;
  await getHospitalInfo()
}
</script>

<style scoped lang="scss">
.hospital {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .item {
    width: 48%;
    margin: 10px 0px;
    cursor: pointer;
  }
}
</style>